<template>
	<upper-navigation>内容详情</upper-navigation>
	<view id="community-detail">
		<view class="main-post">
			<view class="post-header">
				<image :src=" domain + ( detail.post.Creator ? detail.post.Creator.Avatar || '/default.png' : '/default.png' ) " class="avatar" />
				<view class="post-creat">
					<view class="author">
						{{ detail.post.Author || '用户不存在' }}
					</view>
					<view class="created-time">
						{{ detail.post.CreatedOn }} · {{ detail.post.IpRegion }}
					</view>
				</view>
				<view class="more-container">
					
				</view>
			</view>
			<view class="post-topic">
				{{ detail.post.Topic }}
			</view>
			<view class="post-content" v-html="detail.post.PrerenderContent"></view>
			<image :src=" domain  + ( detail.post.Cover || '' ) " class="post-image"  mode="widthFix" />
			<!-- <view class="post-footer">
				<view class="icon">
					点赞
				</view>
				<view class="icon">
					分享
				</view>
			</view> -->
		</view>
		<view class="comment-post">
			<view class="comment-text">
				评论 {{  detail.post.Replies }}
			</view>
			<view class="no-comment" v-if="!detail.comment.length">
				暂无评论
			</view>
			
			<view class="comment-item" v-else v-for="(item,index) in detail.comment" :key="index">
				<image :src=" domain + ( item.Creator.Avatar || '/default.png' ) " 
				class="left-avatar" />
				<view class="right-content">
					<view class="header">
						<view class="comment-creat">
							<view class="author">
								{{ item.Creator.RealName }}
							</view>
							<view class="created-time">
								{{ item.CreatedOn }} · {{ item.IpRegion }}
							</view>
						</view>
					</view>
					<view class="comment-content" v-html="item.PrerenderContent">
					</view>
				</view>
			</view>
		</view>
	</view>
	<image :src=" domain + '/static/Community/rootBackImg.png'" class="bg-img" />
	<view class="bar-fixed-height" style="height: 130rpx;">
		<!-- 用来处理小程序显示时的底部导航栏的覆盖的高度 -->
	</view>
	<view class="bottom-bar">
		<view class="text-container" >
			<textarea @linechange="lineChange" :style="{height: line.height + 'rpx'}"
			:show-confirm-bar="false"
			 v-model="submitContent" placeholder="描述信息..." />
		</view>
		<button class="icon" @click="submit">提交</button>
	</view>
</template>

<script setup>
	import { domain } from '../../stores/useApp.js'
	import upperNavigation from './upperNavigation.vue'
	import bottomBar from './bottomNavigationBar.vue'
	import backBtn from '../DigitalPlatform/back.vue'
	import { onLoad } from "@dcloudio/uni-app"
	import { ref, reactive } from "vue"
	import { onReachBottom } from '@dcloudio/uni-app';
	import setShare from '../../share.js'
	import parseHtmlData from '../DigitalPlatform/parseHtmlData.js'
	const detail = reactive({
		id: '',
		post: {},
		comment: [],
	})
	let Page = 1;
	let PageSize = 10;
	
	onLoad((option) => {
		detail.id = option.id;
		Page = 1;
		getPost().then(()=>{
			getComment();
		})
		getLocation();
	})
	
	async function getComment() {
		let msg = await uni.post("/uc/forums/GetComments", {
			ThreadId: detail.id,
			Page: Page,
			PageSize: PageSize,
		});
		detail.comment.push( ...msg.data );
	}
	
	async function getPost () {
		let msg = await uni.post("/uc/forums/GetThread", {
			id: detail.id,
		});
		detail.post = msg.data;
		setShare({
			title: `${msg.data.Topic} - 云上埔坪`,
			path: `/pages/Community/CommunityDetail?id=${detail.id}`
		});
	}
	
	const submitContent = ref('');
	const location = reactive({
		Longitude: '',
		Latitude: '',
	});
	const line = reactive({
		row: 5,//限制最高5行
		height: 40,
	})
	function lineChange(e) {
		let row = e.detail.lineCount;
		line.height = (row<=5 ? row : line.row) * 40;
	}
	async function submit () {
		let msg = await uni.post("/uc/forums/SaveComment", {
			RawContent: submitContent.value,
			ThreadId: detail.id,
			Longitude: location.Longitude,
			Latitude: location.Latitude,
		});
		submitContent.value = '';
		msg.data.IsVerify && detail.post.Replies++ ;
		//刷新
		detail.comment = [];
		Page = 1;
		getComment();
	}
	
	//下拉加载
	onReachBottom(() => {
		Page ++ ;
		getComment();
	});
	
	function getLocation () {
		location.Longitude = -1;
		location.Latitude = -1;
		// uni.getLocation({
		// 	type: 'gcj02',
		// 	success: function (res) {
		// 		location.Longitude = res.longitude;
		// 		location.Latitude = res.latitude;
		// 	},
		// 	fail: function (res) {
		// 		console.log('Error!',res);
		// 		location.Longitude = -1;
		// 		location.Latitude = -1;
		// 	}
		// })
	}
	
</script>

<style lang="less">
	.back-btn {
		// 样式
		width: 150rpx;
		height: 64rpx;
		background-color: rgba(0, 0, 0, 0.2);
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		border-radius: 32rpx;
		color: #fff;
		z-index: 999;
		
		cursor: pointer;
		text-align: center;
		font-size: 1em;
		line-height: 64rpx;
		
		position: absolute;
		top: var(--status-bar-height);
		left: 20rpx
	}

	#community-detail {
		padding: 0 30rpx; //得大于曲面屏的左右像素
		.main-post{
			padding: 30rpx 0;
			border-bottom: 1rpx solid #d4c4c4;
			.post-header {
				height: 80rpx;
				display: flex;
				.avatar {
					width: 80rpx; //width === height
					height: 80rpx;
					border-radius: 50%;
				}
				
				.post-creat {
					margin-left: 25rpx;
					flex: 1;

					.author {
						line-height: 40rpx;
						font-size: 30rpx;
					}
					.created-time {
						line-height: 40rpx;
						font-size: 20rpx;
						color: #575757;
					}
				}
				.more-container {
					font-size: 50rpx;
					color: #575757;
				}
				
			}
			.post-topic {
				font-size: 50rpx;
				font-weight: bold;
				margin: 25rpx 0 40rpx 0;
			}
			.post-content {
				font-size: 35rpx;
				margin: 25rpx 0;
			}
			.post-image {
				width: 100%;
				border-radius: 20rpx;
				border: 1rpx solid #d4c4c4;
			}
			.post-footer {
				margin: 50rpx;
				display: flex;;
				.icon {
					width: 100rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					margin: 0 auto;
				}
			}
		}
		.comment-post {
			min-height: 400rpx;
			.comment-text {
				margin: 30rpx 0;
				font-size: 40rpx;
			}
			.no-comment {
				text-align: center;
				font-size: 40rpx;
			}
			.comment-item {
				margin: 35rpx 0;
				display: flex;
				.left-avatar {
					width: 80rpx; //width === height
					height: 80rpx;
					border-radius: 50%;
				}
				.right-content {
					flex: 1;
					margin-left: 16rpx;
					border-bottom: 1rpx solid #d4c4c4;
					.header {
						display: flex;
						.comment-creat {
							flex: 1;
							.author {
								line-height: 40rpx;
								font-size: 30rpx;
							}
							.created-time {
								line-height: 40rpx;
								font-size: 20rpx;
								color: #575757;
							}
						}
						
					}
					.comment-content {
						margin: 24rpx 0;
						width: 100%;
						font-size: 35rpx;
					}
				}
			}
			
		}
	}
	.bg-img {
		position: fixed;
		bottom: 100rpx;
		left: 200rpx;
		z-index: -1;
	}
	
	.bottom-bar {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;
		z-index: 999;
		border-top: 1rpx solid #d4c4c4;
		
		.text-container {
			width: calc(100% - 155rpx);
			
			border-radius: 50rpx;
			background-color: #EBF3F8;
			border: 1px solid #a0b3d6; 
			line-height: 30rpx;
			padding: 15rpx 32rpx;
			box-sizing: border-box;
			textarea {
				width: 100%;
				font-size: 30rpx;
				line-height: 40rpx;
			}
		}
		.icon {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			margin-left: 24rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: url('../../static/communityBar.jpg') 50% 50% /cover;
			color: #fff;
		}
	}
</style>